<template>
  <div>
    <el-form-item
      :label="labelRuleValue.title"
      :prop="propValue"
      class="uploadTagPic"
      :rules="
        requirsd(labelRuleValue.type)
          ? [
              {
                required: labelRuleValue.rule == 'required' ? true : false,
                message: labelRuleValue.title + $t('common.common33'),
                trigger: ['blur', 'change'],
              },
            ]
          : null
      "
    >
      <div v-if="!disabledValue">
        <el-upload
          class="avatar-uploader"
          name="image"
          :action="$store.state.api.imagesUploadApi"
          :headers="uploadHeader"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
          :max-size="5120"
          :show-file-list="false"
        >
          <div v-if="imgList.length !== 0">
            <div class="avatar" v-for="(item, index) in imgList" :key="index">
              <img :src="item" alt="" @error="testPM.defImg()" />
              <div class="demo-upload-list-cover">
                <i
                  slot="default"
                  class="el-icon-zoom-in"
                  @click="handlePictureCardPreview($event, item)"
                ></i>
                <i
                  slot="default"
                  class="el-icon-delete"
                  @click="handleRemove($event, item)"
                ></i>
              </div>
            </div>
          </div>
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </div>
      <div class="demo-upload-list" v-else>
        <el-image
          :src="item"
          :preview-src-list="[item]"
          v-for="(item, index) in imgList"
          :key="index"
          :fit="'contain'"
        >
        </el-image>
      </div>
    </el-form-item>
    <el-dialog :visible.sync="dialogVisible" append-to-body>
      <img width="100%" :src="img" alt="" />
    </el-dialog>
  </div>
</template>
<script>
import { mapGetters } from "vuex";
import { getToken } from "@/utils/auth";
export default {
  name: "uploadTag",
  props: {
    value: {
      type: [String, Array], //对应值
      default: () => "",
    },
    propValue: {
      type: String,
      default: "",
    },
    labelRuleValue: {
      type: Object,
      default: function () {
        return {};
      },
    },
    disabledValue: {
      type: Boolean,
      default: false,
    },
    arrayBoll: {
      type: Boolean,
      default: false,
    },
    FormName: {  //Form 表单名
      type: String,
      default: "",
    },
  },
  data() {
    return {
      uploadHeader: {
        Authorization: "Bearer " + getToken(),
        "Accept-Language":
          this.$store.state.settings.language == "en-US"
            ? "en"
            : this.$store.state.settings.language == "zh-TW"
            ? "zh-HK"
            : this.$store.state.settings.language,
      },
      dialogVisible: false,
      imgList: [],
      img: "",
    };
  },
  computed: {
    ...mapGetters(["imagesUploadApi"]),
  },
  created() {
    // console.log(this.value);
    if (!this.arrayBoll) {
      this.imgList = this.value == "" ? [] : [this.value];
    } else {
      this.imgList = typeof this.value == "string" ? [this.value] : this.value;
    }
  },
  methods: {
    requirsd(type) {
      return !["array", "json"].includes(type);
    },
    handlePictureCardPreview(e, item) {
      e.stopPropagation();
      this.dialogVisible = true;
      this.img = item;
    },
    handleRemove(e, item) {
      e.stopPropagation();
      this.imgListChange(item, "del");
    },
    imgListChange(item, del) {
      if (del == "del") {
        var index = this.imgList.indexOf(item);
        if (index !== -1) {
          this.imgList.splice(index, 1);
        }
      }
      if (this.arrayBoll) {
        this.$emit("update:value", this.imgList);
      } else {
        this.$emit("update:value", "");
      }
    },
    handleAvatarSuccess(res, file) {
      if (this.arrayBoll) {
        this.imgList = Object.assign([], this.imgList, [res.data.url]);
        this.$emit("update:value", this.imgList);
      } else {
        this.$emit("update:value", res.data.url);
      }
      this.$emit("getFileVail", this.propValue,this.FormName);
      this.$message.success(res.message);
      // this.dialogImageUrl = URL.createObjectURL(file.raw);
      // this.$emit("update:value", URL.createObjectURL(file.raw));
      // this.$emit("update:value", res.data.url);
    },
    beforeAvatarUpload(file) {
      const isJPG =
        file.type === "image/jpeg" ||
        file.type === "image/jpg" ||
        file.type === "image/png";
      const isLt5M = file.size / 1024 / 1024 < 5;

      if (!isJPG) {
        // 上传图片为JPG或PNG格式
        this.$message.error(this.$t("common.common35"));
      }
      if (!isLt5M) {
        // 上传头像图片大小不能超过 5MB!
        this.$message.error(this.$t("common.common36"));
      }
      return isJPG && isLt5M;
    },
  },
  watch: {
    value(val) {
      if (!this.arrayBoll) {
        this.imgList = val ? [val] : [];
      } else {
        this.imgList = typeof val == "string" ? [val] : val;
      }
    },
  },
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.uploadTagPic {
  ::v-deep .avatar-uploader {
    .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }
    .el-upload:hover {
      border-color: #409eff;
    }
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 150px;
    height: 151px;
    line-height: 150px;
    text-align: center;
  }

  .avatar {
    width: 150px;
    height: 151px;
    display: block;
    position: relative;

    img {
      width: 100%;
      height: 100%;
    }
  }

  .textBox {
    position: relative;
    text-align: center;

    .el-upload__text {
      position: absolute;
      bottom: 10px;
      left: 50%;
      transform: translateX(-50%);
    }
  }

  .demo-upload-list-cover {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    opacity: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.5s;

    i {
      padding: 0 10px;
    }
  }

  .avatar-uploader:hover .demo-upload-list-cover {
    opacity: 1;
    transition: all 0.5s;
  }

  .demo-upload-list-cover i {
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    margin: 0 2px;
  }
  .demo-upload-list {
    display: inline-block;
    // width: 150px;
    height: 150px;
    text-align: center;
    line-height: 150px;
    border: 1px solid transparent;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
    position: relative;
    // box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
    margin-right: 4px;
    display: flex;
    justify-content: space-between;
    .el-image {
      width: 150px;
      // height: 150px;
      margin-right: 1%;
    }
    .el-image:last-child {
      margin-right: 0;
    }
  }
}
</style>